<template>
  <div>
    <div  class="video-container">
      <video id="videoElement" width="960" height="720" class="centeredVideo"></video>
      </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import flv from 'flv.js'
const initVideo = () => {
      const video = flv.createPlayer({
        type: 'mp4',
        // isLive: true,
        // hasAudio: false,
        // hasVideo: true,
        // url: flvLiveUrl.value
        url: 'http://106.14.59.164:9094/zhdw/1704785655322.mp4'
      })
      video.attachMediaElement(document.getElementById('videoElement'))
      video.load()
      video.play()
      // return video
    }
    onMounted(()=>{
      initVideo()
    })
</script>
<style scoped>
.mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }
        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }
</style>